<template>
  <div class="main-container">
    <!-- 表头 -->
    <div class="breadcrumb">
      <el-page-header @back="routerBack()" content="详情页面"> </el-page-header>
    </div>
    <el-row>
      <el-button-group class="btn5">
        <el-button type="primary" size="small" icon="el-icon-edit" @click="revoke()" v-if="$checkAuth('修改销售产品通知单') && showBtn.revoke">撤销变更</el-button>
        <el-button type="primary" size="small" icon="el-icon-edit" @click="edit()" v-if="$checkAuth('修改销售产品通知单') && showBtn.edit">编辑</el-button>
        <el-button type="primary" size="small" icon="el-icon-check" @click="save()" v-if="$checkAuth('修改销售产品通知单') && showBtn.save">保存</el-button>
        <el-button type="primary" size="small" icon="el-icon-close" @click="cancel()" v-if="$checkAuth('修改销售产品通知单') && showBtn.cancel">取消</el-button>
        <el-button type="primary" size="small" icon="el-icon-top" @click="ssubmit()" v-if="$checkAuth('提交销售产品通知单') && showBtn.submit">提交</el-button>
        <el-button type="primary" size="small" icon="el-icon-top" @click="pageViewChangePreAudit()" v-if="$checkAuth('初审销售产品通知单') && showBtn.preAudit">初审</el-button>
        <el-button type="primary" size="small" icon="el-icon-circle-check" @click="pageViewChangeAudit()" v-if="$checkAuth('审核销售产品通知单') && showBtn.audit">审核</el-button>
        <el-button type="primary" size="small" icon="el-icon-circle-check" @click="pageViewChangeApproval()" v-if="$checkAuth('批准销售产品通知单') && showBtn.approval">批准</el-button>
        <el-button type="primary" size="small" icon="el-icon-close" @click="delNotice()" v-if="$checkAuth('删除销售产品通知单') && showBtn.delete">删除</el-button>
        <el-button type="primary" size="small" icon="el-icon-download" @click="exportNotice()" v-if="$checkAuth('导出销售产品通知单') && showBtn.export">导出</el-button>
        <el-button type="primary" size="small" icon="el-icon-position" @click="close" v-if="showBtn.export">返回</el-button>
      </el-button-group>
    </el-row>
    <el-form :model="notice" ref="baseForm" :rules="noticeRules">
      <!-- 基础信息按钮区域 -->
      <el-row>
        <el-form-item label="基础信息" class="form-label"> </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="通知单号" label-width="120px" prop="noticeNumber">
            <el-input class="w150" v-model="notice.noticeNumber" placeholder="通知单号" clearable :readonly="readOnly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="订货单位" label-width="120px" prop="orderUnit">
            <el-input class="w150" v-model="notice.orderUnit" placeholder="订货单位" clearable :readonly="readOnly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          
        </el-col>
      </el-row>
      <!-- 显示 -->
      <el-row v-if="readOnly">
        <el-col :span="7">
          <el-form-item label="交货状态" label-width="120px" prop="deliveryState">
            <el-input v-model="notice.deliveryState" class="w150" placeholder="交货状态" clearable :readonly="readOnly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="交货地点" label-width="120px" prop="deliveryPlace">
            <el-input v-model="notice.deliveryPlace" class="w150" placeholder="交货地点" clearable :readonly="readOnly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="运输方式" label-width="120px" prop="deliveryMethod">
            <el-input v-model="notice.deliveryMethod" class="w150" placeholder="运输方式" clearable :readonly="readOnly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 编辑 -->
      <el-row v-else>
        <el-col :span="7">
          <el-form-item label="交货状态" label-width="120px" prop="deliveryState">
            <el-autocomplete
              id="iptB3DeliveryState"
              class="w150"
              v-model="notice.deliveryState"
              :fetch-suggestions="querySearch1"
              placeholder="请输入内容"
              :trigger-on-focus="!readOnly"
              :readonly="readOnly"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="交货地点" label-width="120px" prop="deliveryPlace">
            <el-autocomplete
              id="iptB3DeliveryPlace"
              class="w150"
              v-model="notice.deliveryPlace"
              :fetch-suggestions="querySearch2"
              placeholder="请输入内容"
              :trigger-on-focus="!readOnly"
              :readonly="readOnly"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="运输方式" label-width="120px" prop="deliveryMethod">
            <el-autocomplete
              id="iptB3DeliveryMethod"
              class="w150"
              v-model="notice.deliveryMethod"
              :fetch-suggestions="querySearch3"
              placeholder="请输入内容"
              :trigger-on-focus="!readOnly"
              :readonly="readOnly"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="交货方式" label-width="120px" prop="inBatches">
            <el-radio-group v-model="notice.inBatches">
              <el-radio id="radioB3Unified" class="w30" :label="true" :disabled="!disabledEdit" @change="deliveryTypeChange">统一</el-radio>
              <el-radio id="radioB3InBatches" class="w60" :label="false" :disabled="!disabledEdit" @change="deliveryTypeChange">分批</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="交货日期" label-width="120px" prop="deliveryDate">
            <el-date-picker
              id="dateB3DeliveryDate"
              v-model="notice.deliveryDate"
              @change="unifiedDeliveryDateChange"
              type="date"
              class="w150"
              :readonly="!isUnifiedDelivery || readOnly"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="状态" label-width="120px" prop="state">
            <el-input class="w150" v-model="notice.state" placeholder="状态" :readonly="readOnly" :disabled="disabledEdit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="备注" label-width="120px" prop="remark">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10 }" v-model="notice.remark" :readonly="readOnly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 产品信息 -->
      <el-row>
        <el-form-item label="产品信息" class="form-label">
          <el-button style="float :left;" class="mr20" type="text" icon="el-icon-plus" @click="addProduct()" v-if="canEditTable">添加</el-button>
          <el-upload
            style="float :left;"
            v-if="canEditTable"
            class="upload-demo"
            :http-request="uploadFile"
            accept=".xls"
            auto-upload
            show-file-list
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button type="text" class="mr20">导入</el-button>
            <span slot="tip" class="el-upload__tip">只能上传xls文件,且不超过500kb</span>
          </el-upload>
          <el-button style="float :left;" class="ml50" type="text" icon="el-icon-download" @click="downloadTemplateFile()" v-if="canEditTable">模板下载</el-button>
        </el-form-item>
      </el-row>

      <!-- 查看产品信息 -->
      <el-table border stripe :data="productList" row-key="producingId" class="mb10" v-if="!canEditTable" @row-dblclick="showDispatch">
        <el-table-column prop="sequenceId" label="序列号" align="right" width="80" fixed></el-table-column>
        <el-table-column prop="drawingNumber" label="图号" align="center" width="140"></el-table-column>
        <el-table-column prop="productName" label="品名" align="center" width="140"></el-table-column>
        <el-table-column prop="materialQuality" label="材质" align="center" width="140"></el-table-column>
        <el-table-column prop="number" label="数量" align="center" width="80"></el-table-column>
        <el-table-column prop="deliveryDate" label="交货日期" align="center" width="150"></el-table-column>
        <el-table-column prop="suggestedPrice" label="建议采购价" align="center" width="120" v-if="$checkAuth('建议采购价')"></el-table-column>
        <el-table-column prop="suggestedPriceRemark" label="建议采购价备注" align="center" width="120" v-if="$checkAuth('建议采购价')"></el-table-column>
        <el-table-column prop="state" label="状态" align="center" width="120"></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" v-if="canAddProduct" width="60">
          <template slot-scope="scope" v-if="canAddProduct">
            <el-button @click.native.prevent="deleteRow(scope.$index, productList)" type="text" icon="el-icon-delete" size="small"></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="finishedNumber" label="完工数量" v-if="showProducingNumber" align="center" width="100"></el-table-column>
        <el-table-column prop="workingNumber" label="在产数量" v-if="showProducingNumber" align="center" width="100"></el-table-column>
        <el-table-column prop="pendingNumber" label="待处理数量" v-if="showProducingNumber" align="center" width="100"></el-table-column>
        <el-table-column prop="waitingNumber" label="未投产数量" v-if="showProducingNumber" align="center" width="100"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center" min-width="100"></el-table-column>
        <el-table-column plabel="操作" fixed="right" align="center" v-if="showProducingNumber" width="100">
          <template slot-scope="scope" v-if="showProducingNumber">
            <el-button @click="showDispatch(scope.row)" type="primary" size="small">查看派工</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- ==================================================================================================== -->
      <!-- ==================================================================================================== -->
      <!-- 编辑产品信息 ======================================================================================= -->
      <!-- ==================================================================================================== -->
      <!-- ==================================================================================================== -->
      <el-table border stripe :data="productList" row-key="index" class="mb10" v-if="canEditTable">
        <el-table-column prop="sequenceId" label="序列号" align="right" width="80" fixed></el-table-column>
        <el-table-column prop="drawingNumber" label="图号" align="center" width="250">
          <template slot-scope="scope">
            <el-autocomplete
              v-model="scope.row.drawingNumber"
              :readonly="productInfoReadOnly(scope.row)"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入图号"
              @select="handleSelect($event, scope.row)"
            ></el-autocomplete>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="品名" align="center" width="140">
          <template slot-scope="scope">
            <el-input v-model="scope.row.productName" :readonly="productInfoReadOnly(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="materialQuality" label="材质" align="center" width="140">
          <template slot-scope="scope">
            <el-input v-model="scope.row.materialQuality" :readonly="productInfoReadOnly(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" align="center" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.number" type="number" min="0" :readonly="readOnly"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryDate" label="交货日期" align="center" width="150">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.deliveryDate" type="date" :disabled="notice.inBatches"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="suggestedPrice" label="建议采购价" align="center" width="140" v-if="$checkAuth('建议采购价')">
          <template slot-scope="scope">
            <el-input v-model="scope.row.suggestedPrice" :readonly="productInfoReadOnly(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="suggestedPriceRemark" label="建议采购价备注" align="center" width="140" v-if="$checkAuth('建议采购价')">
          <template slot-scope="scope">
            <el-input v-model="scope.row.suggestedPriceRemark" :readonly="productInfoReadOnly(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center" width="120"></el-table-column>
        <el-table-column prop="finishedNumber" label="完工数量" v-if="showProducingNumber" align="center" width="100"></el-table-column>
        <el-table-column prop="workingNumber" label="在产数量" v-if="showProducingNumber" align="center" width="100"></el-table-column>
        <el-table-column prop="pendingNumber" label="待处理数量" v-if="showProducingNumber" align="center" width="100"></el-table-column>
        <el-table-column prop="waitingNumber" label="未投产数量" v-if="showProducingNumber" align="center" width="100"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center" min-width="100">
          <template slot-scope="scope">
            <el-input :id="'iptB3ProductRemark' + scope.row.producingId" v-model="scope.row.remark"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" v-if="!showBtn.edit" width="60">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.state || ('生产通知审批' == scope.row.state && ['未提交', '初审未通过', '变更未提交', '变更初审未通过'].includes(notice.state))"
              @click.native.prevent="deleteRow(scope.$index, productList)"
              type="text"
              icon="el-icon-delete"
              size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- ==================================================================================================== -->
      <!-- ==================================================================================================== -->
      <!-- 办理记录表格 -->
      <!-- ==================================================================================================== -->
      <!-- ==================================================================================================== -->
      <el-row>
        <el-form-item label="办理记录" class="form-label" style="margin-top = 5px"></el-form-item>
      </el-row>
      <div class="handle" v-if="showDetail">
        <el-table :data="handleList" border stripe class="custom-table">
          <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
          <el-table-column label="操作" prop="handleName" align="center" width="120"></el-table-column>
          <el-table-column label="操作人" prop="handlerName" align="center" width="120"></el-table-column>
          <el-table-column label="操作时间" prop="createTime" align="center" width="250"></el-table-column>
          <el-table-column label="操作结论" prop="handleConclusion" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.handleConclusion ? '同意' : '不同意' }}
            </template>
          </el-table-column>
          <el-table-column label="下一环节" prop="next" width="120"></el-table-column>
          <el-table-column label="操作意见" prop="handleRemark" min-width="120"></el-table-column>
        </el-table>
      </div>

      <!-- ==================================================================================================== -->
      <!-- ==================================================================================================== -->
      <!-- 提交初审弹框 -->
      <!-- ==================================================================================================== -->
      <!-- ==================================================================================================== -->
      <el-dialog title="提交初审" :visible.sync="preDdialogVisible" width="35%" :close-on-click-modal="false" @close="closePreDialog">
        <el-form>
          <el-form-item label="初审人员" label-width="120px" prop="next">
            <el-select v-model="preAuditor" class="w200" placeholder="请选择初审人员" clearable filterable>
              <el-option v-for="item in userList" :key="item" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作备注" label-width="120px" prop="submitInput">
            <el-input class="w300" type="textarea" :row="3" v-model="submitInput"></el-input>
          </el-form-item>

          <el-form-item label-width="120px">
            <el-button type="primary" @click="submitToPreAudit">保存</el-button>
            <el-button @click="closePreDialog">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- ==================================================================================================== -->
      <!-- ==================================================================================================== -->
      <!-- 初审部分 -->
      <!-- ==================================================================================================== -->
      <!-- ==================================================================================================== -->
      <div v-if="showPreAudit">
        <el-row>
          <el-form-item label="初审" class="form-label hh"></el-form-item>
        </el-row>
        <el-form :model="handleResult" ref="form" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="初审结论" label-width="120px" prop="handleConclusion">
                <el-select id="iptB3PreAuditConclusion" v-model="handleResult.handleConclusion" class="w150" placeholder="请选择审批结论" clearable filterable>
                  <el-option label="--请选择--" :value="2"></el-option>
                  <el-option id="optionB3PreAuditPass" label="通过" :value="1"></el-option>
                  <el-option label="不通过" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="处理意见" label-width="120px" prop="handleRemark">
                <el-input type="textarea" :row="5" v-model="handleResult.handleRemark" style="width: 70vw"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer anniu">
          <el-button id="btnB3PreAuditSave" type="primary" @click="submitForm(0)">保存</el-button>
          <el-button @click="close">返回</el-button>
        </div>
      </div>

      <!-- 审核部分 -->
      <div v-if="showReview">
        <el-row>
          <el-form-item label="审核" class="form-label hh"></el-form-item>
        </el-row>
        <el-form :model="handleResult" ref="form" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核结论" label-width="120px" prop="handleConclusion">
                <el-select id="iptB3AuditConclusion" v-model="handleResult.handleConclusion" class="w150" placeholder="请选择审批结论" clearable filterable>
                  <el-option label="--请选择--" :value="2"></el-option>
                  <el-option id="optionB3AuditPass" label="通过" :value="1"></el-option>
                  <el-option label="不通过" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="处理意见" label-width="120px" prop="handleRemark">
                <el-input type="textarea" :row="5" v-model="handleResult.handleRemark" style="width: 70vw"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer anniu">
          <el-button id="btnB3AuditSave" type="primary" @click="submitForm(1)">保存</el-button>
          <el-button @click="close">返回</el-button>
        </div>
      </div>

      <!-- 批准部分 -->
      <div v-if="showApproval">
        <el-row>
          <el-form-item label="批准" class="form-label"></el-form-item>
        </el-row>
        <el-form :model="handleResult" ref="form" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="批准结论" label-width="120px" prop="handleConclusion">
                <el-select id="iptB3ApproveConclusion" v-model="handleResult.handleConclusion" class="w150" placeholder="请选择批准结论" clearable filterable>
                  <el-option label="--请选择--" :value="2"></el-option>
                  <el-option id="optionB3ApprovePass" label="通过" :value="1"></el-option>
                  <el-option label="不通过" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="处理意见" label-width="120px" prop>
                <el-input type="textarea" :row="5" v-model="handleResult.handleRemark" style="width: 70vw"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer anniu">
          <el-button id="btnB3ApproveSave" type="primary" @click="submitForm(2)">保存</el-button>
          <el-button @click="close">返回</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts">
import { getUserListApi } from '@/api/authority/api-authority'
import { getNoticeDetail, preauditNotice, auditNotice, approvalNotice } from '@/api/notice'
import { getNoticeList, commitNotice, commitvisible, getTotal, deleteNotice, exportNotice, cancelChange, getNotice, uploadFile, selectByDrawingNumber } from '@/api/notice'
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import { Notification } from 'element-ui'
import _ from 'lodash'
import dayjs from 'dayjs'

const vuexNotice = namespace('NewNotice')

@Component({
  components: {}
})
export default class DialogDetail extends Vue {
  public $refs!: {
    baseForm: any
    form: any
  }

  /* ==================================================================================================== */
  /* ==================================================================================================== */
  /* 生命周期 初始化 页面路由 BEGIN BEGIN BEGIN BEGIN BEGIN BEGIN BEGIN BEGIN BEGIN BEGIN BEGIN BEGIN BEGIN */
  /* ==================================================================================================== */
  /* ==================================================================================================== */

  /* ================================================== */
  /* ================================================== */
  /* 生命周期函数 ====================================== */
  /* ================================================== */
  /* ================================================== */
  created() {
    // todo typeNumber 应该是没用了
    this.typeNumber = this.$route.params.typeNumber
    this.judgeTypeNumber(this.typeNumber)
    console.log(this.typeNumber)
    if (this.rowData.state == '进行中') {
      this.showcount = false
      this.showmodify = false
    }
    if (this.rowData.state == '变更审核未通过' || this.rowData.state == '变更未提交') {
      this.showUndo = true
    }
  }

  /* ================================================== */
  /* ================================================== */
  /* 页面路由 返回上级 ================================= */
  /* ================================================== */
  /* ================================================== */
  routerBack() {
    this.$router.back()
  }

  // 双击产品表格行，查看产品派工情况
  showDispatch(row) {
    // 携带图号参数跳转至路线单列表页面
    console.log(row)
    console.log(row.drawingNumber)
    this.$router.push({
      name: 'menuA1DispatchForm',
      params: {
        from: 'notice',
        drawingNumber: row.drawingNumber
      }
    })
  }

  /* ==================================================================================================== */
  /* ==================================================================================================== */
  /* 生命周期 初始化 页面跳转 END END END END END END END END END END END END END END END END END END END   */
  /* ==================================================================================================== */
  /* ==================================================================================================== */

  /* ==================================================================================================== */
  /* ==================================================================================================== */
  /* 销售产品编辑 BEGIN ================================================================================== */
  /* ==================================================================================================== */
  /* ==================================================================================================== */

  /* ================================================== */
  /* ================================================== */
  /* 销售产品编辑 是否可编辑 ============================ */
  /* ================================================== */
  /* ================================================== */
  productInfoReadOnly(row) {
    return row.state && ('生产中' == row.state || '已完成' == row.state)
  }

  /* ==================================================================================================== */
  /* ==================================================================================================== */
  /* 销售产品编辑 END ==================================================================================== */
  /* ==================================================================================================== */
  /* ==================================================================================================== */

  /*********************************
   ***** 产品表格显示与可编辑控制 ****
   ********************************/
  // 是否显示完工报表字段
  showProducingNumber: boolean = false
  // 是否可编辑产品表格
  canEditTable: boolean = false

  initShowProducingNumber() {
    // 首次审批流程中不显示完工报表字段
    this.showProducingNumber = !['未提交', '审核未通过', '待审核', '批准未通过', '待批准'].includes(this.notice.state)
  }

  flowProductSequenceId() {
    for (let i = 0; i < this.productList.length; i++) {
      this.productList[i].sequenceId = String(i + 1)
    }
  }

  /*****************************************************
   ************ 按钮显示控制 及 事件绑定 *****************
   *****************************************************/
  showBtn: any = {
    revoke: false,
    edit: true,
    save: false,
    cancel: false,
    submit: false,
    preAudit: false,
    audit: false,
    approval: false,
    export: true,
    delete: false
  }

  private initShowBtn() {
    this.showBtn = {
      revoke: false,
      edit: false,
      save: false,
      cancel: false,
      submit: false,
      preAudit: false,
      audit: false,
      approval: false,
      export: true,
      delete: false
    }
    if (['变更未提交', '变更初审未通过'].includes(this.notice.state)) {
      this.showBtn.revoke = true
    }
    if (['未提交', '初审未通过'].includes(this.notice.state)) {
      this.showBtn.delete = true
    }
    if (['未提交', '初审未通过', '变更未提交', '变更初审未通过'].includes(this.notice.state)) {
      this.showBtn.edit = true
      this.showBtn.submit = true
    }
    if ('进行中' == this.notice.state) {
      this.showBtn.edit = true
    }
    if (['待初审', '审核未通过', '变更待初审', '变更审核未通过'].includes(this.notice.state)) {
      this.showBtn.preAudit = true
    }
    if (['待审核', '批准未通过', '变更待审核', '变更批准未通过'].includes(this.notice.state)) {
      this.showBtn.audit = true
    }
    if (['待批准', '变更待批准'].includes(this.notice.state)) {
      this.showBtn.approval = true
    }
  }

  private hideShowBtn() {
    this.showBtn = {
      revoke: false,
      edit: false,
      save: false,
      cancel: false,
      submit: false,
      preAudit: false,
      audit: false,
      approval: false,
      export: false,
      delete: false
    }
  }

  /**
   * 点击编辑按钮，释放只读状态，进入编辑状态，约束某些字段不能编辑
   */
  edit() {
    // 判断是否可编辑
    let canEditState = ['未提交', '初审未通过', '变更未提交', '变更初审未通过', '进行中']
    if (!canEditState.includes(this.notice.state)) {
      this.$message.warning('此状态下通知单不可修改！')
    } else {
      this.showBtn = {
        revoke: false,
        edit: false,
        save: true,
        cancel: true,
        submit: false,
        preAudit: false,
        audit: false,
        approval: false,
        export: false,
        delete: false
      }
      this.readOnly = false
      this.disabledThree = false

      this.disabledEdit = true
      this.canAddProduct = true

      // 表格可编辑
      this.canEditTable = true

      // 实现对象的深拷贝（知识点：赋值/浅拷贝/深拷贝）
      this.tempNotice = JSON.parse(JSON.stringify(this.notice))
      this.tempProductList = JSON.parse(JSON.stringify(this.productList))
      console.log(this.tempProductList)
      // for (var i = 0; i < this.tempProductList.length; i++) {
      //   if (this.tempProductList[i].number >= this.tempProductList[i].workingNumber + this.tempProductList[i].finishedNumber) {
      //     this.readOnlyCount = false
      //   }
      // }
    }
  }

  /**
   * 点击保存按钮，向后端发送请求
   * 请求成功，退出编辑状态
   * 请求失败，给出提示
   */
  async save() {
    if (!this.checkForm()) return false

    this.productList = this.productList.map(element => {
      element.deliveryDate = dayjs(element.deliveryDate).format('YYYY-MM-DD')
      return element
    })

    // 过滤掉空行产品
    this.notice.productList = this.productList.filter(item => {
      return item.drawingNumber != ''
    })

    // 输入图号/品名/材质不能包含空格
    for (var i = 0; i < this.notice.productList.length; i++) {
      let drawingNumber = this.notice.productList[i].drawingNumber
      let productName = this.notice.productList[i].productName
      let materialQuality = this.notice.productList[i].materialQuality
      console.log(drawingNumber)
      console.log(productName)
      console.log(materialQuality)

      if (drawingNumber.indexOf(' ') >= 0) {
        this.$message('图号' + drawingNumber + '包含空格')
        return
      }
      if (productName.indexOf(' ') >= 0) {
        this.$message('品名' + productName + '包含空格')
        return
      }
      if (materialQuality.indexOf(' ') >= 0) {
        this.$message('材质' + materialQuality + '包含空格')
        return
      }
    }
/*
    for (var i = 0; i < this.notice.productList.length; i++) {
      if (this.notice.productList[i].number < this.notice.productList[i].workingNumber + this.notice.productList[i].finishedNumber) {
        let doingNumber = this.notice.productList[i].workingNumber + this.notice.productList[i].finishedNumber
        let drawingNumber = this.notice.productList[i].drawingNumber
        this.$alert(drawingNumber + '数量不能少于已投产数量' + doingNumber + '（完工+在产）')
        return
      }
    }
*/
    // 发送请求
    let result = await this.EDIT_NOTICE({ ...this.notice })
    if (result) {
      this.showmodify = false
      this.showcount = false
      this.readOnly = true
      this.disabledEdit = false
      this.canAddProduct = false
      this.disabledThree = true
      this.canEditTable = false
      this.freshPageData()
    }
    console.log('保存后的产品列表')
    console.log(this.productList)
  }

  private checkForm() {
    let flag = true
    let notice = this.notice
    if (!notice.orderUnit) {
      this.$message('请填写订货单位')
      return false
    } else if (!notice.workingNumber) {
      this.$message('请填写产品工号')
      return false
    } else if (notice.inBatches && !notice.deliveryDate) {
      this.$message('请填写统一交货日期')
      return false
    }
    if (this.productList.length == 0) {
      this.$message('通知单无产品')
      return false
    }
    this.productList.forEach(item => {
      if (!item.drawingNumber) {
        this.$message('产品图号不能为空')
        flag = false
      } else {
        item.drawingNumber = item.drawingNumber.replace(/\s+/g, '')
        if (item.drawingNumber == '') {
          this.$message('请填写产品图号')
          flag = false
        }
      }
      if (!notice.inBatches && !item.deliveryDate) {
        this.$message('请填写产品交货日期')
        flag = false
      }
    })
    return flag
  }

  /**
   * 点击取消按钮，退出编辑状态，数据复原，进入只读状态
   */
  cancel() {
    this.initShowBtn()
    this.readOnly = true
    this.showmodify = false
    this.showcount = false
    this.disabledEdit = false
    this.canAddProduct = false
    this.disabledThree = true
    this.canEditTable = false
    // this.readOnlyCount = true
    // 取消编辑恢复原数据
    this.notice = this.tempNotice
    this.productList = this.tempProductList
  }

  /**
   * 点击撤销变更按钮
   */
  async revoke() {
    this.showUndo = true
    let res = await cancelChange({ noticeId: this.notice.noticeId })
    if (res.code == 200) {
      this.canEditTable = false
      this.freshPageData()
      this.$message({
        type: 'success',
        message: '撤销变更成功'
      })
    }
  }

  /* 显示并滚动至初审视图 */
  private pageViewChangePreAudit() {
    // 隐藏操作按钮
    this.hideShowBtn()
    // 显示办理记录
    this.showDetail = true
    // 显示初审组件
    this.showPreAudit = true
    // 页面滚动到审核组件
    window.setTimeout(() => {
      var btn = document.getElementById('btnB3PreAuditSave')
      if (btn != null) {
        btn.scrollIntoView({ behavior: 'smooth' })
      }
    }, 100)
  }
  private pageViewChangeAudit() {
    // 隐藏操作按钮
    this.hideShowBtn()
    // 显示办理记录
    this.showDetail = true
    // 显示审核组件
    this.showReview = true
    // 页面滚动到审核组件
    window.setTimeout(() => {
      var btn = document.getElementById('btnB3AuditSave')
      if (btn != null) {
        btn.scrollIntoView({ behavior: 'smooth' })
      }
    }, 100)
  }

  private pageViewChangeApproval() {
    // 隐藏操作按钮
    this.hideShowBtn()
    // 显示办理记录
    this.showDetail = true
    // 显示批准组件
    this.showApproval = true
    // 页面滚动到批准组件
    window.setTimeout(() => {
      var btn = document.getElementById('btnB3ApproveSave')
      if (btn != null) {
        btn.scrollIntoView({ behavior: 'smooth' })
      }
    }, 100)
  }

  private async freshPageData() {
    let res = await getNotice({ noticeId: this.notice.noticeId })
    if (res.code == 200) {
      this.bindNoticeInfo(res.data)
      this.initShowBtn()
    }
  }

  /**
   * 点击删除按钮，删除通知单
   */
  delNotice() {
    this.$alert('您确定删除通知单[' + this.notice.noticeNumber + ']？', '操作提示', {
      confirmButtonText: '确定',
      type: 'error',
      callback: action => {
        if (action === 'confirm') {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '操作提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
            .then(async () => {
              //向后端传递删除数据id
              let resp = await deleteNotice({ noticeId: this.notice.noticeId }).catch((err: any) => {
                Notification.error(err)
              })
              if (resp) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.close()
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      }
    })
  }
  /***************************************************************************************************** */

  rules: any = {
    handleConclusion: [{ required: true, message: '请选择审核结论', trigger: 'change' }]
  }

  noticeRules: any = {
    noticeNumber: [{ required: true, pattern: /^20[0-9]{2}-[0-9]{3}$/, message: '格式：年份-序号', trigger: 'change' }],
    workingNumber: [{ required: true, pattern: /^BL[0-9]{4}$/, message: '格式：BL0000', trigger: 'change' }]
  }

  // 页面数据
  title: string = '新增生产通知单'
  transportMethod: any[] = ['汽运', '空运', '船运'] // 运输方式

  // 组件状态控制
  visible: boolean = false // 本组件可见性
  readOnly: boolean = true
  canAddProduct: boolean = false // 能否添加/删除产品：新增修改/普通修改可以，变更修改不可以
  disabledEdit: boolean = false // 表单编辑功能是否禁用
  showDetail: boolean = false // 是否显示通知单详情（处理记录&完工情况）
  isUnifiedDelivery: boolean = false // 是否是统一交货
  // 审核、批准、按钮的显示

  showBtnEdit: boolean = true
  showPreAudit: boolean = false
  showReview: boolean = false
  showApproval: boolean = false
  showDao: boolean = false
  // 撤销变更按钮的显示
  showUndo: boolean = false
  // 产品信息部分是否可编辑
  showmodify: boolean = false
  disabledThree: boolean = true
  showcount: boolean = false
  readOnlyCount: boolean = true

  productList: any[] = [] // 产品列表
  handleList: any[] = []
  notice: any = {
    noticeId: '',
    noticeNumber: '', // 通知单号
    orderUnit: '', // 订货单位
    workingNumber: '', // 产品工号
    deliveryState: '', // 交货状态
    deliveryPlace: '', // 交货地点
    deliveryMethod: '', // 运输方式
    inBatches: true, // 交货方式 统一true 分批false
    deliveryDate: '', // 交货日期
    state: '', // 状态
    remark: '' // 备注
  }

  noticeId: any = ''
  contitle: string = ''

  // 审批结果对象
  handleResult: any = {
    noticeId: '',
    handleName: '',
    handleConclusion: 2,
    handleRemark: ''
  }

  // data -- start
  // 通知单下单
  formSearch: any = {
    beginTime: '', //查询开始日期
    endTime: '', //查询结束日期
    orderUnit: '', //订货单位
    workingNumber: '', //产品工号,
    state: '',
    page: 1,
    pageSize: 10,
    visibility: false
  }
  // 提交状态
  commitState: any[] = ['未提交', '审核未通过', '变更未提交', '变更审核未通过']
  // 审核状态
  reviewState: any[] = ['待审核', '变更待审核', '批准未通过', '变更批准未通过']
  // 批准状态
  allowState: any[] = ['待批准', '变更待批准']
  noticeList: any[] = []
  totalNotice: any = 0
  totalStates: any = {}
  // 点击提交 提交的那一行数据
  rowData: any

  // // 是否显示产品信息中的【添加】按钮
  // showAdd: any = false

  // 表单数据
  formData: any = {
    orderUnit: '', //订货单位
    workingNumber: '' //产品工号
  }

  // 传值进入时 1：双击 2：新建  3：审核与批准  4：修改
  typeNumber: any

  // 生产通知相关数据
  tempNotice: any
  tempProductList: any
  // @vuexNotice.State notice: any
  // @vuexNotice.State productList: any
  // @vuexNotice.State handleList: any
  // @vuexNotice.Mutation SET_NOTICE: any
  // @vuexNotice.Mutation SET_PRODUCT_LIST: any// 这种绕一大圈又回来的数据我不懂有什么用，既不节省代码渲染又慢还多写一个set方法，看的我就想吐槽一下

  // @vuexNotice.State noticeSearch: any
  // @vuexNotice.Action GET_NOTICE: any
  @vuexNotice.Action EDIT_NOTICE: any

  /**
   * 跳转至本组件，传递数据并初始化
   * @param selectedNoticeId 选中的通知单ID
   * @param type 处理类型 审核 or 批准
   */

  // 判断typeNumber
  judgeTypeNumber(typeNumber: any) {
    this.showReview = JSON.parse(this.$route.params.showReview)
    this.showApproval = JSON.parse(this.$route.params.showApproval)
    // this.showBtn = JSON.parse(this.$route.params.showBtn)
    this.showDao = JSON.parse(this.$route.params.showDao)

    switch (typeNumber) {
      case '1':
        // 双击进入时
        this.bindNoticeInfo(this.$route.params.row)
        this.showDetail = true
        this.rowData = this.$route.params.row
        console.log(this.rowData)
        break
      case '2':
        // 新建通知单时
        this.bindNoticeInfoAfterCreate(this.$route.params.orderUnit, this.$route.params.workingNumber, this.$route.params.resultNoticeId, this.$route.params.resultNoticeNumber)
        this.canAddProduct = false
        break
      case '3':
        // 审核与批准
        this.bindNoticeInfo(this.$route.params.row)
        this.showDetail = true
        let temp: any = this.$route.params.row
        this.noticeId = temp.noticeId
        this.handleResult.noticeId = this.noticeId

        this.transformHandleConclusion()
        this.visible = true
        this.rowData = this.$route.params.row
        break
      case '4':
        // 点击修改
        this.bindNoticeInfo(this.$route.params.row)
        this.showDetail = true
        this.rowData = this.$route.params.row
        if (this.rowData.state == '进行中') {
          this.showcount = true
          this.showmodify = false
        }
        break

      default:
        break
    }
    this.initShowBtn()
    this.initShowProducingNumber()
  }

  /**
   * 转换审批结论 true->同意 false->不同意
   */
  transformHandleConclusion() {
    if (this.handleList.length > 0) {
      for (let i = 0; i < this.handleList.length; i++) {
        this.handleList[i].handleConclusion = this.handleList[i].handleConclusion ? '通过' : '未通过'
      }
    }
  }

  // async setNoticeDetail() {
  //   let res = await getNoticeDetail({ noticeId: this.noticeId });
  //   if(res) {
  //     this.handleList = res.data.handleList;
  //     this.productList = res.data.productList;
  //   }
  // }

  /* ==================================================================================================== */
  /* ==================================================================================================== */
  /* === 提交初审 ======================================================================================== */
  /* ==================================================================================================== */
  /* ==================================================================================================== */

  // 初审弹框可见性
  preDdialogVisible: boolean = false
  submitInput: string = ''
  preAuditor: string = ''
  userList: any = []

  // 点击页面提交按钮：打开提交弹框
  async ssubmit() {
    // 表单校验
    if (!this.checkForm()) return false
    // 获取办公人员姓名
    await getUserListApi({ onTheJob: true })
      .catch(err => Notification.error(err))
      .then((res: any) => {
        this.userList = []
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < res.data[i]['roles'].length; j++) {
            if (res.data[i]['roles'][j].roleName != '工人') {
              this.userList.push(res.data[i].userName)
              break
            }
          }
        }
        this.tempNotice = JSON.parse(JSON.stringify(this.notice))
        this.tempProductList = JSON.parse(JSON.stringify(this.productList))
        this.preDdialogVisible = true
      })
  }

  // 点击弹框提交按钮：提交初审
  async submitToPreAudit() {
    const handleData = {
      noticeId: '',
      handleName: '',
      handleConclusion: true,
      handleRemark: '',
      next: ''
    }
    handleData.noticeId = this.tempNotice.noticeId
    handleData.handleName = '提交'
    handleData.handleConclusion = true
    handleData.handleRemark = this.submitInput
    handleData.next = this.preAuditor
    this.submitNotice(handleData)
  }

  // 提交请求 API
  async submitNotice(handleData: any) {
    let res = await commitNotice(handleData)
    if (res.code == 200) {
      this.$message({
        type: 'success',
        message: '提交成功'
      })
      this.getSearchNoticeList()
      this.$router.go(-1)
    }
  }

  // 提交成功后会返回通知单列表页面，此方法重新获取数据和统计数据
  async getSearchNoticeList() {
    let formSearch = _.cloneDeep(this.formSearch)
    let res1 = await getNoticeList(formSearch)
    this.totalNotice = _.get(res1, 'total', 0)
    this.noticeList = _.get(res1, 'data', [])
    let res2 = await getTotal(formSearch)
    this.totalStates = _.get(res2, 'data', [])
  }

  // 关闭提交弹框
  closePreDialog() {
    this.submitInput = ''
    this.preAuditor = ''
    this.preDdialogVisible = false
  }

  /* ==================================================================================================== */
  /* ==================================================================================================== */
  /* === 初审/审核/批准 ================================================================================== */
  /* ==================================================================================================== */
  /* ==================================================================================================== */

  // 提交初审/审核/批准请求 校验
  submitForm(type: Number) {
    this.handleResult.noticeId = this.notice.noticeId
    if (this.handleResult.handleConclusion == 2) {
      this.$message('请选择审批结论！')
    } else if (this.handleResult.handleRemark == undefined) {
      this.$message.warning('请写处理意见')
    } else {
      this.$refs.form.validate((valid: any) => {
        if (valid) {
          this.submitConclusion(type)
        }
      })
    }
  }

  // 提交初审/审核/批准请求 API
  async submitConclusion(type: Number) {
    let res
    if (type == 0) {
      res = await preauditNotice(this.handleResult)
      if (res) {
        this.$message({
          type: 'success',
          message: '审核成功'
        })
        this.$emit('confirm')
        this.visible = false
        this.showDao = true
        this.$router.go(-1)
        // location.reload()
      }
    } else if (type == 1) {
      res = await auditNotice(this.handleResult)
      if (res) {
        this.$message({
          type: 'success',
          message: '审核成功'
        })
        this.$emit('confirm')
        this.visible = false
        this.showDao = true
        this.$router.go(-1)
        // location.reload()
      }
    } else if (type == 2) {
      res = await approvalNotice(this.handleResult)
      if (res) {
        this.$message({
          type: 'success',
          message: '批准成功'
        })
        this.$emit('confirm')
        this.visible = false
        this.showDao = true
        // location.reload()
        this.$router.go(-1)
      }
    }
  }

  /**
   * 绑定生产通知数据，其他组件跳转至本组件，传递生产通知数据至本组件
   */
  async bindNoticeInfo(noticeData: {}) {
    // this.SET_NOTICE(noticeData)
    // 如果统一交货，则显示交货日期组件，否则，显示空数据
    this.notice = _.cloneDeep(noticeData)
    let res = await getNoticeDetail({ noticeId: noticeData['noticeId'] })

    if (res) {
      this.handleList = res.data.handleList
      // 移出加工产品 只留下销售产品
      this.productList = res.data.productList.map(product => {
        product.children = null
        return product
      })
    }
    if (this.notice.inBatches) {
      this.notice.deliveryDate = dayjs(this.notice.deliveryDate).format('YYYY-MM-DD')
      this.isUnifiedDelivery = true
    } else {
      this.notice.deliveryDate = ''
      this.isUnifiedDelivery = false
    }
  }

  /**
   * 新建生产通知后，跳转至本组件，将新建请求和响应的参数绑定到本组件
   */
  bindNoticeInfoAfterCreate(order: any, working: any, noticeId: any, noticeNumber: any) {
    this.notice.orderUnit = order
    this.notice.workingNumber = working
    this.notice.noticeId = noticeId
    this.notice.noticeNumber = noticeNumber
    this.notice.state = '未提交'
    this.notice.inBatches = false
    this.canAddProduct = true

    console.log(order)
    console.log(this.notice.workingNumber)
  }

  /**
   * 点击导出按钮，导出通知单文档
   */
  async exportNotice() {
    this.tempNotice = JSON.parse(JSON.stringify(this.notice))
    var url = '/notice/export?noticeId='
    window.open(url + this.tempNotice.noticeId)
  }

  /**
   * 添加产品
   */
  tempId: number = 0
  async addProduct() {
    this.tempId = this.tempId + 1
    const newProduct = {
      sequenceId: this.productList.length + 1,
      producingId: null,
      drawingNumber: '',
      productName: '',
      materialQuality: '',
      number: 0,
      deliveryDate: '',
      remark: '',
      typeProduct: '销售',
      parentId: 0
    }
    this.isUnifiedDelivery = this.notice.inBatches
    if (this.notice.deliveryDate) {
      newProduct.deliveryDate = dayjs(this.notice.deliveryDate).format('YYYY-MM-DD')
    }
    this.productList.push(newProduct)
  }

  /**
   * 下载导入模板
   */
  downloadTemplateFile() {
    window.open('/notice/product/import/template')
  }
  // 上传文件
  async uploadFile(event) {
    console.log(event)
    console.log(event.file)

    await uploadFile(event.file)
      .then(res => {
        console.log(res)
        console.log(res.data)
        for (let i = 0; i < res.data.length; i++) {
          if (this.notice.inBatches == true) {
            res.data[i].deliveryDate = this.notice.deliveryDate
          }
          this.productList.push(res.data[i])
        }
        this.flowProductSequenceId()
      })
      .catch(e => {
        console.log(e)

        Notification.error('上传失败')
      })
  }
  fileList: any = []
  handleRemove(file, fileList) {
    console.log(file, fileList)
  }
  handlePreview(file) {
    console.log(file)
  }
  handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
  }
  beforeRemove(file, fileList) {
    return this.$confirm(`确定移除 ${file.name}？`)
  }

  /**
   * 通知单统一交货日期变化
   * 通知单产品交货日期保持一致
   */
  unifiedDeliveryDateChange(value) {
    this.notice.deliveryDate = dayjs(value).format('YYYY-MM-DD')
    this.productList = this.productList.map(element => {
      element.deliveryDate = dayjs(this.notice.deliveryDate).format('YYYY-MM-DD')
      return element
    })
  }

  /**
   * 交货方式发生变化：统一交货/分批交货
   * 统一交货：通知单交货日期组件可选，产品交货日期不可选
   * 分批交货：通知单交货日期组件不可选，产品交货日期可选
   */
  deliveryTypeChange(value) {
    console.log('统一交货方式')
    console.log(value)
    this.isUnifiedDelivery = value
    if (!this.isUnifiedDelivery) this.notice.deliveryDate = ''
  }

  /**
   * 删除一行产品记录
   */
  deleteRow(index, rows) {
    this.$alert('您确定删除本记录？', '错误提示', {
      confirmButtonText: '确定',
      type: 'error',
      callback: action => {
        if (action === 'confirm') {
          rows.splice(index, 1)
          this.flowProductSequenceId()
        }
      }
    })
  }

  /**
   * 关闭组件
   */
  close() {
    this.$router.go(-1)
  }
  /* ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End */
  /* ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End */
  /* ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End ===== 重构End */

  async open(isNew = true) {
    if (isNew) {
      this.title = '新增生产通知单'
      // this.SET_PRODUCT_LIST([])
    } else {
      this.title = '修改生产通知单'
      // this.product=this.productList
    }
    this.showDetail = true
    this.canAddProduct = false
    this.visible = true
  }

  look() {
    this.title = '查看生产通知单'

    this.showDetail = true
    this.visible = true
    this.isUnifiedDelivery = false
    if (this.handleList.length > 0) {
      for (let i = 0; i < this.handleList.length; i++) {
        if (this.handleList[i].handleConclusion == true) {
          this.handleList[i].handleConclusion = '通过'
        }
        if (this.handleList[i].handleConclusion == false) {
          this.handleList[i].handleConclusion = '不通过'
        }
      }
    }
  }

  beforeClose(done) {
    if (!this.readOnly) {
      this.$confirm('您还有未保存的修改, 直接退出将不保存修改内容，是否确认退出?', '退出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          done()
        })
        .catch(() => {})
    } else {
      done()
    }
  }

  delieveryStateArrat: any = ['成品']
  delieveryPlaceArrat: any = ['厂内', '大窑湾港', '大连港']
  delieveryMethodArrat: any = ['船运', '汽运', '空运']
  /**
   * 交货状态框输入提示
   * 注意返回建议列表的数据格式
   * 需要是：{ value:"value" }
   */
  querySearch1(queryString, cb) {
    let tempObjArray: any = []
    for (const iterator of this.delieveryStateArrat) {
      let tempObj = {
        value: iterator
      }
      tempObjArray.push(tempObj)
    }
    var processList = tempObjArray
    var results = queryString ? processList.filter(this.createFilter1(queryString)) : processList
    // 调用 callback 返回建议列表的数据
    cb(results)
  }
  createFilter1(queryString: string) {
    return restaurant => {
      return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    }
  }

  /**
   * 工序输入框输入提示
   * 注意返回建议列表的数据格式
   * 需要是：{ value:"value" }
   */
  querySearch2(queryString, cb) {
    let tempObjArray: any = []
    for (const iterator of this.delieveryPlaceArrat) {
      let tempObj = {
        value: iterator
      }
      tempObjArray.push(tempObj)
    }
    var processList = tempObjArray
    var results = queryString ? processList.filter(this.createFilter2(queryString)) : processList
    // 调用 callback 返回建议列表的数据
    cb(results)
  }
  createFilter2(queryString: string) {
    return restaurant => {
      return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    }
  }

  /**
   * 工序输入框输入提示
   * 注意返回建议列表的数据格式
   * 需要是：{ value:"value" }
   */
  querySearch3(queryString, cb) {
    let tempObjArray: any = []
    for (const iterator of this.delieveryMethodArrat) {
      let tempObj = {
        value: iterator
      }
      tempObjArray.push(tempObj)
    }
    var processList = tempObjArray
    var results = queryString ? processList.filter(this.createFilter3(queryString)) : processList
    // 调用 callback 返回建议列表的数据
    cb(results)
  }
  createFilter3(queryString: string) {
    return restaurant => {
      return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    }
  }

  /**
   * 输入图号，从服务器查询产品信息
   */
  async querySearchAsync(queryString, cb) {
    await selectByDrawingNumber({ drawingNumber: queryString }).then(res => {
      var result: any = []
      for (let i = 0; i < res.data.length; i++) {
        let obj = {
          value: res.data[i].drawingNumber,
          productName: res.data[i].productName,
          materialQuality: res.data[i].materialQuality,
          suggestedPrice: res.data[i].suggestedPrice,
          suggestedPriceRemark: res.data[i].suggestedPriceRemark
        }
        result.push(obj)
      }
      cb(result)
    })
  }
  handleSelect(item, row) {
    row.drawingNumber = item.value
    row.productName = item.productName
    row.materialQuality = item.materialQuality
    row.suggestedPrice = item.suggestedPrice
    row.suggestedPriceRemark = item.suggestedPriceRemark
  }
}
</script>

<style lang="scss" scoped></style>

<style>
.bg {
  height: 1500px;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  margin-left: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
.anniu {
  margin-left: 68vw;
  margin-top: 10px;
}
.bg2 {
  margin-top: 10px;
}
.hh {
  margin-top: 10px;
}
.btn5 {
  float: right;
  margin-right: 50px;
}
</style>
